import React from 'react';
import { Form, Input, Button, } from 'antd';
import { useModifyPassword } from './useModifyPassword';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 5 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 14,
    },
  },
};

const ModifyPassword: React.FC = () => {
  const { saving, submit, form } = useModifyPassword()

  return (
    <Form
      {...formItemLayout}
      form={form}
      name="register"
      scrollToFirstError
    >
      {/* <Form.Item
        name="oldPassword"
        label="旧密码"
        rules={[
          {
            required: true,
            message: '请输入旧密码!',
          },
        ]}
        hasFeedback
      >
        <Input.Password />
      </Form.Item> */}

      <Form.Item
        name="newPassword"
        label="新密码"
        hasFeedback
        rules={[
          {
            required: true,
            message: '请输入新密码!',
          },
          // () => ({
          //     validator(_, value) {
          //         if (checkPassword(value)) {
          //             return Promise.resolve();
          //         }
          //         return Promise.reject('必须包含大小写字母、数字、特称字符，至少8个字符!');
          //     },
          // }),
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item {...tailFormItemLayout}>
        <Button loading={saving} type="primary" onClick={submit}>
          修改
        </Button>
      </Form.Item>
    </Form>
  );
}

export default ModifyPassword
